<!-- <ng-template [ngTemplateOutlet]="templateTop" [ngTemplateOutletContext]="this"></ng-template> -->
<mat-card>
  <mat-spinner [diameter]='40' id="entity-spinner" *ngIf="showSpinner" #entityspinner></mat-spinner>
  <form [formGroup]="formGroup" #entityForm="ngForm" (keydown.enter)="$event.preventDefault()">
    <mat-vertical-stepper [linear]="conf?.isLinear" formArrayName="formArray" #stepper>
      <div *ngFor="let step of conf.wizardConfig; let i = index">
        <mat-step formGroupName="{{i}}" [stepControl]="formArray?.get([i])">
          <ng-template matStepLabel>{{step.label | translate}}</ng-template>
          <div class="form-wrap">
            <ng-container *ngFor="let field of step.fieldConfig; let j = index">
              <div [ngClass]="field.class == 'inline' ? 'form-inline' : 'form-line'" id="{{j}}" fxFlex="100%" fxFlex.gt-xs="calc({{field.width}} - 16px)">
                <div id="dynamicField_{{field.name}}" dynamicField [config]="field" [group]="formArray?.get([i])" [fieldShow]="isShow(field.name) ? 'show' :'hide'">
                </div>
              </div>
            </ng-container>
          </div>
          <mat-card-actions class="wizard-action" *ngIf="conf.summary || i !== (conf.wizardConfig.length - 1); else lastStepAction">
            <button id="cancel_button_{{i}}" color="accent" class="btn btn-block btn-lg btn-primary" (click)="goBack()" mat-button color="accent"
              ix-auto ix-auto-type="button" ix-auto-identifier="CANCEL_{{step.label}}" *ngIf="!conf.hideCancel">{{"Cancel" | translate}}</button>
            <button id="goback_button_{{i}}" mat-button matStepperPrevious *ngIf="i == 0 ? false : true" color="accent"
              ix-auto ix-auto-type="button" ix-auto-identifier="BACK_{{step.label}}">{{"Back" | translate}}</button>
            <button id="goforward_button_{{i}}" *ngIf="!conf.customNext" mat-button matStepperNext color="primary" 
              ix-auto ix-auto-type="button" ix-auto-identifier="NEXT_{{step.label}}" [disabled]="showSpinner">{{"Next" | translate}}</button>
            <button id="custom_button_{{i}}" *ngIf="conf.customNext" (click)="conf.customNext(stepper)" mat-button color="primary"
              ix-auto ix-auto-type="button" ix-auto-identifier="{{customNextText | uppercase}}">{{customNextText | translate}}</button>
            <span *ngFor="let custBtn of conf.custActions">
              <button id="cust_button_{{custBtn.name}}" mat-button color="primary" *ngIf="!conf.isCustActionVisible || conf.isCustActionVisible(custBtn.id, i)" type="button" (click)="custBtn['function']()"
                ix-auto ix-auto-type="button" ix-auto-identifier="{{custBtn.name | uppercase}}">{{custBtn.name | translate}}</button>
            </span>
          </mat-card-actions>
          <ng-template #lastStepAction>
            <mat-card-actions class="wizard-action">
              <button id="secondary_cancel_button" color="accent" class="btn  btn-block btn-lg btn-primary" (click)="goBack()" mat-button color="accent"
                ix-auto ix-auto-type="button" ix-auto-identifier="CANCEL_secondary" *ngIf="!conf.hideCancel">{{"Cancel" | translate}}</button>
              <button id="noconfirm_button" mat-button matStepperPrevious color="accent"
                ix-auto ix-auto-type="button" ix-auto-identifier="BACK_noconfirm">{{"Back" | translate}}</button>
              <button id="confirm_button" mat-button color="primary" (click)="onSubmit()" [disabled]="!entityForm.form.valid"
                ix-auto ix-auto-type="button" ix-auto-identifier="{{saveSubmitText | uppercase}}">{{saveSubmitText | translate}}</button>
            </mat-card-actions>
          </ng-template>
        </mat-step>
      </div>
      <mat-step *ngIf="conf.summary">
        <ng-template matStepLabel>{{"Confirm Options" | translate}}</ng-template>
        <div *ngIf="conf.summary">
          <div> {{ conf.summary_title }}</div>
          <ul >
            <li *ngFor="let item of conf.summary | keyvalue : originalOrder">
              <div *ngIf="item.value | keyvalue; else inobject">
                <label>{{item.key}}:</label>
                <ul class="wizard-ul">
                  <li *ngFor="let subitem of item.value | keyvalue : originalOrder">
                    <div *ngIf="subitem.value">{{subitem.key | translate}}: {{subitem.value}}</div>
                  </li>
                </ul>
              </div>
              <ng-template #inobject>
                <div *ngIf="item.value">{{item.key | translate}}: {{item.value}}</div>
              </ng-template>
            </li>
          </ul>
        </div>
        {{"Confirm these settings." | translate}}
        <mat-card-actions class="wizard-action">
          <button id="secondary_cancel_button" color="accent" class="btn  btn-block btn-lg btn-primary" (click)="goBack()" mat-button color="accent"
            ix-auto ix-auto-type="button" ix-auto-identifier="CANCEL_secondary" *ngIf="!conf.hideCancel">{{"Cancel" | translate}}</button>
          <button id="noconfirm_button" mat-button matStepperPrevious color="accent"
            ix-auto ix-auto-type="button" ix-auto-identifier="BACK_noconfirm">{{"Back" | translate}}</button>
          <button id="confirm_button" mat-button color="primary" (click)="onSubmit()"  [disabled]="!entityForm.form.valid"
            ix-auto ix-auto-type="button" ix-auto-identifier="{{saveSubmitText | uppercase}}">{{saveSubmitText | translate}}</button>
        </mat-card-actions>
      </mat-step>
    </mat-vertical-stepper>
  </form>
</mat-card>
